<template>
	<div class="matching">
		<TopInfo />
		<TopTabs />
		<div class="content">
			<div class="filter-part">
				<el-form :model="form">
					<el-row>
						<el-col :span="8">
							<el-form-item
								label="企业名称"
								:label-width="formLabelWidth"
							>
								<el-autocomplete
									clearable
									v-model="form.entname"
									style="width: 100%"
									:fetch-suggestions="querySearchAsync"
									placeholder="请输入企业名称搜索"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="法人姓名"
								:label-width="formLabelWidth"
							>
								<el-input
									clearable
									v-model="form.legalPerson"
									autocomplete="off"
									placeholder="请输入法人姓名搜索"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="股东姓名"
								:label-width="formLabelWidth"
							>
								<el-input
									clearable
									v-model="form.shareholderName"
									autocomplete="off"
									placeholder="请输入股东姓名搜索"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="手机号"
								:label-width="formLabelWidth"
							>
								<el-input
									clearable
									v-model="form.tel"
									autocomplete="off"
									placeholder="请输入手机号搜索"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="信用代码"
								:label-width="formLabelWidth"
							>
								<el-input
									clearable
									v-model="form.unifiedCode"
									autocomplete="off"
									placeholder="请输入信用代码搜索"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="行业"
								:label-width="formLabelWidth"
							>
								<el-cascader
									clearable
									style="width: 100%"
									v-model="form.entIndustry"
									:options="Hyoptions"
									@change="handleChange"
								></el-cascader>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item
								label="地区"
								:label-width="formLabelWidth"
							>
								<el-cascader
									clearable
									style="width: 100%"
									:options="options"
									v-model="selectedOptions"
									@change="addressChoose"
								></el-cascader>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="成立年限"
								:label-width="formLabelWidth"
							>
								<el-date-picker
									v-model="form.benginDate"
									style="width: 100%"
									type="date"
									placeholder="yyyy-MM-dd"
									value-format="yyyy-MM-dd"
								>
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label-width="formLabelWidth">
								<div slot="label">
									至&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								</div>
								<el-date-picker
									style="width: 100%"
									v-model="form.endDate"
									type="date"
									value-format="yyyy-MM-dd"
									placeholder="yyyy-MM-dd"
								>
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="注册资本"
								:label-width="formLabelWidth"
							>
								<el-select
									clearable
									v-model="region"
									placeholder="请选择注册资本"
									style="width: 100%"
									@change="ChangeRegion"
								>
									<el-option
										label="10万以内"
										value="100000"
									></el-option>
									<el-option
										label="10-50万"
										value="100000-500000"
									></el-option>
									<el-option
										label="50-100万"
										value="500000-1000000"
									></el-option>
									<el-option
										label="100-200万"
										value="1000000-2000000"
									></el-option>
									<el-option
										label="200-1000万"
										value="2000000-10000000"
									></el-option>
									<el-option
										label="1000-5000万"
										value="1000000-50000000"
									></el-option>
									<el-option
										label="5000万以上"
										value="50000000"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								label="企业类型"
								:label-width="formLabelWidth"
							>
								<el-select
									clearable
									v-model="form.entType"
									placeholder="请选择企业类型"
									style="width: 100%"
								>
									<el-option
										v-for="item in Qyoptions"
										:key="item.TypeId"
										:label="item.TypeName"
										:value="item.TypeId"
									>
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8" style="padding-left: 50px">
							<el-button
								size="mini"
								type="primary"
								@click="search()"
								>确 定</el-button
							>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div class="match-count">
				为你查找到<span>{{ count }}</span
				>条记录
			</div>
			<ul class="matching-list" v-loading="IsLoading">
				<li
					@click="ToCompanyDetail(item)"
					v-for="item in matchingData"
					:key="item.Id"
				>
					<div class="line1">{{ item.EntName }}</div>
					<!-- <div class="line2">地区：湖南省</div> -->
					<div class="line3">
						<span class="fl"
							>法定代表人：{{ item.LegalPerson }}</span
						>
						<span class="fl"
							>注册资本：{{ item.PaidinCapital }}</span
						>
						<span class="fl">成立日期：{{ item.StartDate }}</span>
						<span class="fl long"
							>统一社会信用码：{{ item.UnifiedCode }}</span
						>
					</div>
					<div class="line3">
						<span class="fl">电话：{{ item.Telephone }}</span>
						<span class="fl">邮箱：{{ item.Email }}</span>
						<span class="fl">官网：{{ item.Website }}</span>
						<!-- <span class="fl">官网：<a :href="item.Website" target="_blank">{{ item.Website }}</a></span> -->
					</div>
					<div class="line2">地址：{{ item.RegAddr }}</div>
				</li>
			</ul>
			<div class="pagin">
				<el-pagination
					background
          :hide-on-single-page="true"
					layout="total, prev, pager, next"
					@current-change="handleIndexChangeGs"
					:total="Gstotal"
				>
				</el-pagination>
			</div>
		</div>
		<!-- <infinite-loading @infinite="infiniteHandler" style="margin-top: 30px">
			<span slot="no-more" style="color: #999; font-size: 18px"
				>到底了！</span
			>
		</infinite-loading> -->
		<BottomInfo />
	</div>
</template>

<script>
import BottomInfo from "../components/BottomInfo";
import TopInfo from "../components/TopInfo";
import TopTabs from "../components/TopTabs";
import InfiniteLoading from "vue-infinite-loading";
import {
	provinceAndCityData,
	regionData,
	provinceAndCityDataPlus,
	regionDataPlus,
	CodeToText,
	TextToCode,
} from "element-china-area-data";
export default {
	name: "Matching",
	data() {
		return {
			keywords: "",
			options: regionDataPlus,
			selectedOptions: [],
			loading: false,
			matchingData: [],
			Hyoptions: [],
			limit: 10,
			GsPage: 1,
			Gstotal: 0,
			dialogVisible: false,
			region: "",
			IsLoading: false,
			count: 0,
			Qyoptions: [],
			form: {
				entname: "",
				legalPerson: "",
				shareholderName: "",
				tel: "",
				unifiedCode: "",
				entIndustry: "",
				provence: "",
				city: "",
				area: "",
				benginDate: "",
				endDate: "",
				regCapital: "",
				regCapitalEnd: "",
				entType: "",
			},
			formLabelWidth: "120px",
			count: 0,
			restaurants: [],
			isSerthe: [],
			state: "",
			timeout: null,
		};
	},
	mounted() {
		//console.log(this.$route.params.Keywords);
		if (this.$route.params.Keywords) {
			this.form.entname = this.$route.params.Keywords;
			this.search();
		}
		this.GetHy();
		this.GetQylx();
	},
	methods: {
		GetHy() {
			this.$axios({
				url: "/Ent/GetEntIndustryList",
				method: "post",
				data: {
					//   id: this.newData.Id,
				},
				transformRequest: [
					function (data) {
						let ret = "";
						for (let it in data) {
							ret +=
								encodeURIComponent(it) +
								"=" +
								encodeURIComponent(data[it]) +
								"&";
						}
						return ret;
					},
				],
				headers: {
					"Content-Type":
						"application/x-www-form-urlencoded; charset=UTF-8",
				},
			})
				.then((res) => {
					let arr = res.data.data;
					for (let i = 0; i < arr.length; i++) {
						let children = [];
						if (arr[i].ParentId == 0) {
							for (let s = 0; s < arr.length; s++) {
								if (arr[s].ParentId == arr[i].IndustryId) {
									children.push({
										value: arr[s].IndustryId,
										label: arr[s].IndustryName,
									});
								}
							}
							this.Hyoptions.push({
								value: arr[i].IndustryId,
								label: arr[i].IndustryName,
								children,
							});
						}
					}
				})
				.catch((err) => {
					//console.log(err);
				});
		},
		GetQylx() {
			this.$axios({
				url: "/Ent/GetEntTypeList",
				method: "post",
				data: {
					// id: this.newData.Id,
				},
				transformRequest: [
					function (data) {
						let ret = "";
						for (let it in data) {
							ret +=
								encodeURIComponent(it) +
								"=" +
								encodeURIComponent(data[it]) +
								"&";
						}
						return ret;
					},
				],
				headers: {
					"Content-Type":
						"application/x-www-form-urlencoded; charset=UTF-8",
				},
			})
				.then((res) => {
					// console.log(res.data.data);
					this.Qyoptions = res.data.data;
				})
				.catch((err) => {
					//console.log(err);
				});
		},
		handleChange(value) {
			// console.log(value[1]);
			this.form.entIndustry = value[1];
		},
		ChangeRegion(value) {
			// console.log(value);
			if (value == 100000) {
				this.form.regCapitalEnd = "1000000";
				this.form.regCapital = "";
			} else if (value == 50000000) {
				this.form.regCapitalEnd = "";
				this.form.regCapital = "50000000";
			} else {
				let arr = value.split("-");
				// console.log(arr);
				this.form.regCapitalEnd = arr[1];
				this.form.regCapital = arr[0];
			}
		},
		addressChoose(value) {
			// console.log("地址", value);
			// console.log(
			//   "省市区：",
			//   CodeToText[value[0]],
			//   CodeToText[value[1]],
			//   CodeToText[value[2]]
			// );
			this.form.provence =
				CodeToText[value[0]] && CodeToText[value[0]] != "全部"
					? CodeToText[value[0]]
					: "";
			this.form.city =
				CodeToText[value[1]] && CodeToText[value[1]] != "全部"
					? CodeToText[value[1]]
					: "";
			this.form.area =
				CodeToText[value[2]] && CodeToText[value[2]] != "全部"
					? CodeToText[value[2]]
					: "";
		},
		querySearchAsync(queryString, callback) {
			//方法接收两个参数，
			//一个是queryString接收用户输入的值，也就是用户输入的内容，callback是回调函数，处理请求回来的参数
			let params = {
				text: queryString,
			};
			// let params 定义向后台传的参数，text是和后台商量好的字段，/接口地址/？text=queryString
			if (queryString === "") {
				console.log(1);
			} else {
				// 调用接口方法，请求数据
				this.$axios
					.get("/Ent/GetEntNameByEs", {
						params: {
							key: this.form.entname,
						},
					})
					.then((res) => {
						this.restaurants = [];
						res.data.data.forEach((item) => {
							this.restaurants.push({
								value: item.EntName,
								entName: item.EntName,
							});
						});
						// console.log(params.text);
						callback(this.restaurants);
					});
			}
		},
		handleSelect(item) {
			// item是每一项
			// let params = {
			// 	icd_code: item.chapter,
			// };
			//params 同上
			// this.isShaow = true; //可忽略
			// this.isShow = false; //可忽略
			// console.log(item.EntName);
			// 调用接口方法，请求数据
			this.$axios
				.get("/Ent/GetEntNameByEs", {
					params: {
						key: this.form.entname,
					},
				})
				.then((res) => {
					this.isSerthe = [];
					res.data.data.forEach((item) => {
						this.isSerthe.push({
							value: item.EntName,
							entName: item.EntName,
						});
					});
					// console.log(this.isSerthe);
				});
		},
		search() {
			// this.matchingData = [];
			this.infiniteHandler();
		},
		infiniteHandler() {
			this.IsLoading = true;
			this.$axios({
				url: "/Ent/GetEntList",
				method: "post",
				data: {
					// limit: this.limit,
					limit: 10,
					page: this.GsPage,
					entname: this.form.entname,
					legalPerson: this.form.legalPerson,
					shareholderName: this.form.shareholderName,
					tel: this.form.tel,
					unifiedCode: this.form.unifiedCode,
					entIndustry: this.form.entIndustry,
					provence: this.form.provence,
					city: this.form.city,
					area: this.form.area,
					benginDate: this.form.benginDate,
					endDate: this.form.endDate,
					regCapital: this.form.regCapital,
					regCapitalEnd: this.form.regCapitalEnd,
					entType: this.form.entType,
				},
				transformRequest: [
					function (data) {
						let ret = "";
						for (let it in data) {
							ret +=
								encodeURIComponent(it) +
								"=" +
								encodeURIComponent(data[it]) +
								"&";
						}
						return ret;
					},
				],
				headers: {
					"Content-Type":
						"application/x-www-form-urlencoded; charset=UTF-8",
				},
			})
				.then((response) => {
					if (response.data.data.length) {
						// response.data为你请求接口返回的数组列表
						this.count = response.data.count;
						this.matchingData = response.data.data;
            this.Gstotal = response.data.count ? response.data.count : 0;
						// $state?.loaded();
						// if (this.matchingData.length / 10 === 10) {
						//   // 这里是加载了10页数据，设置不在加载
						//   $state.complete();
						//   this.count = 0;
						// }
						this.dialogVisible = false;
						this.$cookies.set("MatchingKeyWords", this.keywords);
					} else {
						// $state.complete();
						this.count = 0;
					}
					this.IsLoading = false;
				})
				.catch((err) => {
					console.log(err);
					this.IsLoading = false;
				});
		},
		handleIndexChangeGs(current) {
			// console.log(current);
			this.GsPage = current;
			this.search();
		},
		ChangeValue(value) {
			// this.SetValue(value);
			this.dialogVisible = true;
		},
		// handleClose(done) {
		//   this.$confirm("确认关闭？")
		//     .then((_) => {
		//       done();
		//     })
		//     .catch((_) => {});
		// },
		ToCompanyDetail(allData) {
			this.$cookies.set("TopActive", 9);
			this.$cookies.set("NewId", allData.Id);
			this.$cookies.set("Website", allData.Website);
			this.$router.push({ name: "CompanyDetail" });
		},
	},
	components: {
		BottomInfo,
		TopInfo,
		TopTabs,
		InfiniteLoading,
	},
};
</script>

<style scoped>
.matching {
	min-height: 1000px;
}
.content {
	background-color: #f4f6fc;
	padding: 25px 0;
}
.filter-part {
	background-color: #fff;
	box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
	margin: 0 auto;
	width: 1200px;
	padding: 25px;
	box-sizing: border-box;
	/* padding-bottom: 0; */
}
.search-part {
	padding: 30px 280px;
	border-bottom: 1px solid #eeeeee;
}
.search-select {
	width: 100%;
}
.area,
.year {
	padding: 12px 0;
	border-bottom: 1px solid #eeeeee;
	box-sizing: border-box;
	overflow: hidden;
	color: #333;
	font-size: 14px;
}
.year {
	border-bottom: none;
}
.area .title,
.year .title {
	width: 120px;
	text-align: center;
	padding: 5px 8px;
	box-sizing: border-box;
}
.area-list,
.year-list {
	width: 1030px;
}
.area-list li,
.year-list li {
	float: left;
	cursor: pointer;
	margin-right: 20px;
	padding: 5px 8px;
}
.area-list li:last-child,
.year-list li:last-child {
	margin-right: 0;
}
.area-list li.active,
.year-list li.active {
	color: #fff;
	background-color: #095aff;
}
.area-list li:hover,
.year-list li:hover {
	color: #fff;
	background-color: #095aff;
}
.match-count {
	width: 1200px;
	margin: 25px auto;
	height: 50px;
	line-height: 50px;
	background: #ffffff;
	color: #333;
	font-size: 14px;
	text-align: center;
}
.pagin {
	width: 1200px;
	margin: 0 auto;
  padding-bottom: 20px;
  text-align: center;
	background: #ffffff;
	font-size: 14px;
}
.match-count span {
	color: #095aff;
	font-weight: bold;
	margin: 0 5px;
}
.matching-list {
	width: 1200px;
	min-height: 300px;
	background: #ffffff;
	box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
	margin: 0 auto;
	padding: 25px 35px;
	box-sizing: border-box;
}
.matching-list li {
	padding: 25px 30px;
	border-radius: 10px;
	color: #333333;
	font-size: 16px;
	cursor: pointer;
}
.matching-list li:nth-child(2n + 1) {
	background: #f7f7f7;
}
.matching-list li .line1 {
	font-weight: bold;
	font-size: 22px;
	margin-bottom: 20px;
}
.matching-list li .line2 {
	margin-bottom: 10px;
}
.matching-list li .line3 {
	margin-bottom: 10px;
	overflow: hidden;
}
.matching-list li .line3 span.fl {
	width: 22%;
}
.matching-list li .line3 span.long {
	width: 32%;
}
.matching-list li .line4 {
	overflow: hidden;
}
.matching-list li .line4 .star {
	color: #ffd34c;
	font-size: 24px;
	float: right;
}
</style>
